<template>
  <div class="page">
      <div class="header">
          <h5 class="text1"><i class="fa fa-cubes"></i> 我的VIP</h5>
          <p class="text2">开通会员获取更多权益！</p>
      </div>
      <!--            ==========================================================-->
      <div class="container " >
      <div class="container2 ">
          <div class="blank"></div>
          <div class="column" >
              <div class="ct color1 ">
                  <div class="diamond ">
                      <p class="price" ><span>￥</span>198</p>
                  </div>
                  <div class="bottom " >
                      <h1>年费VIP会员</h1>
                      <div class="">
                          <div class="txt">
                              <p>尊享会员全部特权</p>
                              <p>合每天仅需0.54元</p>
                              <p>解锁全部试题库</p>
                          </div>
                      </div>
                      <div class="agree">同意
                          <a href="" >会员服务协议</a>
                      </div>
                      <div class="footer" >
                          <button>立即开通</button>
                      </div>
                  </div>
              </div>
              <div class="ct color2 ">
                  <div class="diamond ">
                      <p class="price" ><span>￥</span>56</p>
                  </div>
                  <div class="bottom " >
                      <h1>季度VIP会员</h1>
                      <div class="">
                          <div class="txt">
                              <p>尊享会员全部特权</p>
                              <p>合每天仅需0.62元</p>
                              <p>支持发布考试通知</p>
                          </div>
                      </div>
                      <div class="agree">同意
                          <a href="" >会员服务协议</a>
                      </div>
                      <div class="footer" >
                          <button>立即开通</button>
                      </div>
                  </div>
              </div>
              <div class="ct color1 ">
                  <div class="diamond ">
                      <p class="price" ><span>￥</span>15</p>
                  </div>
                  <div class="bottom " >
                      <h1>连续包月VIP会员</h1>
                      <div class="">
                          <div class="txt">
                              <p>尊享会员全部权益</p>
                              <p>开通续费仅需15元/月</p>
                              <p>试题批量导出</p>
                          </div>
                      </div>
                      <div class="agree">同意
                          <a href="">会员服务协议</a>
                      </div>
                      <div class="footer" >
                          <button>立即开通</button>
                      </div>
                  </div>
              </div>
              <div class="ct color2 ">
                  <div class="diamond ">
                      <p class="price" ><span>￥</span>20</p>
                  </div>
                  <div class="bottom " >
                      <h1>月度VIP会员</h1>
                      <div class="">
                          <div class="txt">
                              <p>尊享会员全部权益</p>
                              <p>合每天仅需0.67元</p>
                              <p>支持多种组卷方式</p>
                          </div>
                      </div>
                      <div class="agree">同意
                          <a href="" >会员服务协议</a>
                      </div>
                      <div class="footer" >
                        <button>立即开通</button>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'VIP',
  components: {},
  data() {
    return {

    }
  }
}
</script>

<style scoped>
    .header {
        margin: 20px 0 25px;
        background-color: white;
        border: 1px solid transparent;
        border-radius: 3px;
        padding: 15px 15px 15px 15px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
        text-align: left;
    }
    .text1 {
        font-size: 14px;
        font-weight: 400;
        color: black;
        margin: 0;
    }
    .text2 {
        font-size: 10px;
        color: #777777;
        margin: 0;
    }

    .container {
        background-color: white;
        padding-top: 5px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.125);
    }
    .container2 {
        margin: 10px 10px;

        height: 100%;
        border: 1px solid black;
        /*background-color:  #29282f;*/
        background-color: rgba(1,1,1,0.8);
    }
    .ct{
        display: inline-block;
        width: 22%;
        margin: 0 15px 0 0;
    }
    .blank{
        height: 80px;
        width: 100%;
    }
    .column {
        margin: 0;
        padding: 0;

    }
    .bottom {
        color: #999999;
        vertical-align: bottom;
        background-color:#191212f0 ;
        width:100%;
        border-radius:50px 50px 0 0;
        margin: 0;
        padding: 45px 0 0 0;
    }


    .diamond {			/* 钻石：梯形和三角形组成 */
        width: 60px;
        height: 0;
        position: relative;
        border-bottom: 30px solid #aa7700;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        vertical-align: center ;
        align-content: center;
        margin: 0 auto;
    }
    .diamond:before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        border-left: 60px solid transparent;
        border-right: 60px solid transparent;
        border-top: 60px solid #aa7700;
        left: -30px;
        top: 20px;
    }
    .price{
         position: relative;
         top:20px;
        font-size: 20px;
        color: #edc880;
     }
    .agree{
        height: 20px;
        font-size: x-small;
        color: #9a9a9a;
    }

    .color2 .agree{
        color: #343434;
    }
    a{
        color: #9a9a9a;
    }
    .color2 a{
        color: #343434;
    }
    .txt{
        padding-top: 20px;
        line-height: 25px;
        height: 160px;
        font-size: small;
    }
    h1{
        color: #edc880;
        margin: 20px 30px;
        border-bottom: 1px dashed ;
    }
    .footer{
        padding:0 0 40px 0;
    }
    button {
        height: 40px;
        width: 100px;
        background-color:#f5c97d;
        border: 0;
    }
    button:hover {
        color: #aa7700;
    }
    .color1 .diamond {
        border-bottom: 20px solid #505050;
    }
    .color1 .diamond:before{
        border-top: 50px solid #505050;
    }
    .color2 .diamond {
        border-bottom: 20px solid #e0b44d;/*#e0b44dd1*/
    }
    .color2 .diamond:before{
        border-top: 50px solid #e0b44d;
    }
    .color2 .bottom {
        background-color:#c09853;
    }
    .color2 .price {
        color: #343434;
    }
    .color2 p,.color2 h1{
        color: #343434;
    }
    @media only screen and (min-width: 690px) and (max-width: 1040px){
        h1{
            margin:10px 0;
            width: 100%;
        }
        .ct{
            width: 23%;
            margin: 0 5px 0 0;
        }
        .diamond {			/* 钻石：梯形和三角形组成 */
            width: 50px;
            height: 0;
            position: relative;
            border-bottom: 25px solid #aa7700;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            vertical-align: center ;
            align-content: center;
            margin: 0 auto;

        }
        .diamond:before {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 50px solid #aa7700;
            left: -25px;
            top: 20px;
        }
        button {
              width: 95%;
          }
    }
    @media only screen and (max-width: 890px) {
        .blank{
            display: none;
        }
        .ct{
            margin: 0 15px 0 0;
            width: 46%;
        }
        .txt{
            padding-top: 10px;
            height: 140px;
        }
        .diamond {			/* 钻石：梯形和三角形组成 */
            width: 60px;
            height: 0;
            position: relative;
            border-bottom: 30px solid #aa7700;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            vertical-align: center ;
            align-content: center;
            margin: 0 auto;
        }
        .diamond:before {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            border-left: 60px solid transparent;
            border-right: 60px solid transparent;
            border-top: 60px solid #aa7700;
            left: -30px;
            top: 20px;
        }
        .footer {
            padding-bottom: 20px;
        }
    }
</style>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>